"use client";
import React, { useState } from 'react';
import { FaAngleLeft } from "react-icons/fa";
import { FaAngleRight } from "react-icons/fa";


type PaginationProps = {
    total: number;
    current?: number;
    pageSize?: number;
    onChange?: (page: number) => void;
};
const Pagination = ({ total, current = 1, pageSize = 10 }: PaginationProps) => {
    const [activePage, setActivePage] = useState(current);
    //计算总页数
    const pages = [];
    for (let i = 1; i <= Math.ceil(total / pageSize); i++) {
        pages.push(i);
    }
    //增页函数
    const handlePageAdd = () => {
        if (activePage < total) {
            setActivePage(activePage + 1);
        }
    };
    //减页函数
    const handlePageSub = () => {
        if (activePage > 1) {
            setActivePage(activePage - 1);
        }
    };
    console.log(activePage === total);

    return (
        <ul className='flex items-center gap-2 list-none' >
            <li className='!list-none'><button className='flex justify-center items-center hover:bg-[var(--myTheme-color-lightbase)] disabled:bg-[#00000000] rounded-md w-8 h-8 disabled:text-gray-300 hover:cursor-pointer disabled:cursor-not-allowed' onClick={handlePageSub} disabled={activePage === 1} ><FaAngleLeft /></button></li>

            {pages.map((item, index) => {
                if (pages.length <= 7) {
                    return (<li key={index} className='!list-none'>
                        <button key={index} onClick={() => setActivePage(index + 1)} className={(activePage === index + 1 ? "hover:!bg-[#00000000] border-1 text-[var(--myTheme-color-primary)] " : "") + `h-8 w-8 hover:bg-[var(--myTheme-color-lightbase)] hover:cursor-pointer rounded-md`}  >{item}
                        </button>
                    </li>);
                } else {
                    if (index === 0 || index === 1 || index === 2) {
                        return (
                            <li key={index} className='!list-none'>
                                <button key={index} onClick={() => setActivePage(index + 1)} className={(activePage === index + 1 ? "hover:!bg-[#00000000] border-1 text-[var(--myTheme-color-primary)] " : "") + `h-8 w-8 hover:bg-[var(--myTheme-color-lightbase)] hover:cursor-pointer rounded-md`}  >{item}
                                </button>
                            </li>
                        );
                    } else if (index === 3) {
                        return (
                            <p key={index}>...</p>
                        );
                    } else if (index === pages.length - 1 || index === pages.length - 2 || index === pages.length - 3) {
                        return (
                            <li key={index} className='!list-none'>
                                <button key={index} onClick={() => setActivePage(index + 1)} className={(activePage === index + 1 ? "hover:!bg-[#00000000] border-1 text-[var(--myTheme-color-primary)] " : "") + `h-8 w-8 hover:bg-[var(--myTheme-color-lightbase)] hover:cursor-pointer rounded-md`}  >{item}
                                </button>
                            </li>
                        );
                    }

                }


            })}
            <li className='!list-none'><button className='flex justify-center items-center hover:bg-[var(--myTheme-color-lightbase)] disabled:bg-[#00000000] rounded-md w-8 h-8 disabled:text-gray-300 hover:cursor-pointer disabled:cursor-not-allowed' onClick={handlePageAdd} disabled={activePage === Math.ceil(total / pageSize)}  ><FaAngleRight /></button></li>

        </ul >
    );
};

export default Pagination;
